<script lang="ts">
  import { Modal, Pagination } from "@skeletonlabs/skeleton-svelte";
  import type { XYPosition } from "@xyflow/svelte";
  import { X } from "lucide-svelte";
  import { svgIdList } from "./svgs";
  import { get_user_session } from "$lib/api/user";
  import { request } from "$lib/utils/request";
  import { drawStore } from "../store.svelte";
  import { create_node } from "$lib/api/board/board_draw";
  import IconArrowLeft from "lucide-svelte/icons/arrow-left";
  import IconArrowRight from "lucide-svelte/icons/arrow-right";
  import IconEllipsis from "lucide-svelte/icons/ellipsis";
  import IconFirst from "lucide-svelte/icons/chevrons-left";
  import IconLast from "lucide-svelte/icons/chevron-right";

  const PAGE_SIZE = 50;

  interface ModalProps {
    width: number;
    height: number;
    position: XYPosition;
    onClose: () => void;
  }

  let props: ModalProps = $props();

  let keyword = $state("");

  let curSvgIdList = $state([] as string[]);
  let totalCount = $state(0);
  let curPage = $state(0);

  function loadCurSvgIdList() {
    const allSvgIdList = svgIdList.filter((item) => item.includes(keyword));
    totalCount = allSvgIdList.length;
    curSvgIdList = allSvgIdList.slice(
      PAGE_SIZE * curPage,
      PAGE_SIZE * curPage + PAGE_SIZE
    );
  }

  loadCurSvgIdList();

  async function createNode(svgId: string) {
    const sessionId = await get_user_session();
    await request(
      create_node({
        session_id: sessionId,
        board_id: drawStore.boardInfo?.board_id ?? "",
        draw_id: drawStore.drawId,
        x: props.position.x,
        y: props.position.y,
        w: props.width,
        h: props.height,
        content: {
          BasicSvgContent: {
            svg_id: svgId,
          },
        },
        node_style: {
          bg_color: "bg-surface-100",
          border_width: "border-1",
          border_color: "border-surface-300",
          font_color: "text-primary-500",
          layer:0,
        },
      })
    );
    props.onClose();
  }
</script>

<Modal
  open={true}
  triggerBase="btn preset-tonal"
  contentBase="card bg-surface-200-800 p-4 space-y-4 shadow-xl shadow-surface-500 w-[600px]"
  backdropBase="backdrop-none"
  closeOnEscape={false}
  closeOnInteractOutside={false}
  onOpenChange={(ev) => {
    if (!ev.open) {
      props.onClose();
    }
  }}
>
  {#snippet content()}
    <header class="flex justify-between">
      <h4 class="h4">创建图标节点</h4>
      <button
        type="button"
        class="btn preset-ghost-primary-500"
        onclick={() => props.onClose()}
      >
        <X />
      </button>
    </header>

    <main>
      <input
        class="input rounded-none bg-surface-100-900 text-surface-900-100 mb-2"
        type="text"
        placeholder="搜索图标"
        value={keyword}
        oninput={(e) => {
          keyword = e.currentTarget.value.toLocaleLowerCase().trim();
          curPage = 0;
          loadCurSvgIdList();
        }}
      />
      <div
        class="flex flex-wrap max-h-[calc(100vh-400px)] overflow-y-auto gap-4"
      >
        {#each curSvgIdList as svgId}
          <img
            role="none"
            src={`/icons/board/draw/svg/${svgId}.svg`}
            alt={svgId}
            title={svgId}
            class="hover:preset-filled-primary-100-900 p-2 cursor-pointer"
            onclick={() => createNode(svgId)}
          />
        {/each}
      </div>

      <div class="mt-2 flex justify-end mr-4">
        <Pagination
          data={curSvgIdList}
          count={totalCount}
          page={curPage + 1}
          pageSize={PAGE_SIZE}
          buttonClasses="rounded-none"
          buttonActive="bg-surface-400-600"
          onPageChange={(value) => {
            curPage = value.page - 1;
            loadCurSvgIdList();
          }}
        >
          {#snippet labelEllipsis()}<IconEllipsis
              class="size-4"
            />{/snippet}
          {#snippet labelNext()}<IconArrowRight
              class="size-4"
            />{/snippet}
          {#snippet labelPrevious()}<IconArrowLeft
              class="size-4"
            />{/snippet}
          {#snippet labelFirst()}<IconFirst class="size-4" />{/snippet}
          {#snippet labelLast()}<IconLast class="size-4" />{/snippet}
        </Pagination>
      </div>
    </main>
  {/snippet}
</Modal>
